import { Tooltip } from "antd";
import { autorun } from "mobx";
import { useEffect, useRef, useState } from "react";
import styles from "./toolRepeat.module.less";
import { TooltipProps } from "antd/lib/tooltip";
import editorStore from "@/editorComponent/editorStore";
import designEditor from "@/editorComponent/designEditor";
import clsx from "clsx";
import { divide } from "lodash";
import ToolBaseRepeat from "./ToolBaseRepeat/ToolBaseRepeat";
import ToolMirrorRepeat from "./ToolMirrorRepeat/ToolMirrorRepeat";
import ToolHorizontalRepeat from "./ToolHorizontalRepeat/ToolHorizontalRepeat";
import ToolVerticalRepeat from "./ToolVerticalRepeat/ToolVerticalRepeat";
import ToolRepeatSpaceContorl from "./ToolRepeatSpaceContorl/ToolRepeatSpaceContorl";
import { RepeatType } from "#/type";

// 重复按钮
export default function ToolRepeat() {

  const dom = useRef<HTMLDivElement | null>(null);
  const [hover, setHover] = useState(false);
  const [visible, setVisible] = useState(false);
  const [disable, setDisable] = useState(false);
  const [repeat, setRepeat] = useState<RepeatType>(editorStore.repeat);

  useEffect(() => autorun(() => {
    const { activeObjectId, lock } = editorStore;
    setDisable(lock);

    const activeObject = designEditor.fabricCanvas.getActiveObject();
    if (activeObjectId && activeObject && activeObject.type === "image") {
      setVisible(true);
    } else {
      setVisible(false);
    }
  }), []);

  useEffect(() => autorun(() => {
    setRepeat(editorStore.repeat);
  }), []);

  const tooltipProps: TooltipProps = {
    overlayInnerStyle: {
      backgroundColor: 'white',
    },
    onOpenChange(visible) {
      setHover(visible);
    },
    color: 'white',
    trigger: 'click',
    placement: 'topLeft',
  };

  return (
    <Tooltip
      title={
        <div>
          {/* 基础平铺 */}
          <ToolBaseRepeat />
          {/* 镜像平铺 */}
          <ToolMirrorRepeat />
          {/* 横向平铺 */}
          <ToolHorizontalRepeat />
          {/* 纵向平铺 */}
          <ToolVerticalRepeat />
          {/* 平铺间距控制器 */}
          <ToolRepeatSpaceContorl />
        </div>
      }
      {...tooltipProps}
    >
      <div
        ref={dom}
        className={clsx(
          styles.toolRepeat,
          visible && styles.visible,
          repeat != "no_repeat" && styles.active,
          disable && styles.disable,
          hover && styles.hover
        )}
      >
        平铺
      </div>
    </Tooltip>
  );

}
